<!--
 * @Descripttion: 
 * @Author: yizheng.yuan
 * @Date: 2021-05-23 12:13:30
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-05-23 12:51:50
-->

<html>
  <head>
    <title>css-弹性盒子flex布局的学习</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>

  <body>
    
    <div style="width: 100wh; height: 100vh; border: 5px solid red; display: flex;">
      <div style="width: 250px; height: 100%; border: 1px solid black;">
        左侧菜单
      </div>

      <div style="border: 5px solid blue; flex: 1; display: flex; flex-direction: column;">
        <div style="height: 60px; line-height: 60px; background-color:red;">头部区域</div>
        <div style="flex: 1; border: 10px solid black;  overflow: auto;">
          <div style="height: 2000px;">
            内容区域
          </div>
        </div>
      </div>
      
    </div>

    

  </body>
</html>